<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="zh">
    <title>测试服务器连接</title>

    <%@include file="common/head.jsp" %>

    <script type="text/javascript">
        function click_btn2() {
            location.href = "test/error.html";
        }
    </script>

    <script>
        $(function () {

            $("#btn1").click(function () {

                // 准备要发送的数据
                let student = {
                    "stuId": 5,
                    "stuName": "tom",
                    "address": {
                        "province": "广东",
                        "city": "深圳",
                        "street": "后瑞"
                    },
                    "subjectList": [
                        {
                            "subjectName": "JavaSE",
                            "subjectScore": 100
                        }, {
                            "subjectName": "SSM",
                            "subjectScore": 99
                        }
                    ]
                };

                // 将JSON对象转换为JSON字符串
                let json_student = JSON.stringify(student);

                // 发送Ajax请求
                $.ajax({
                    "url": "test/send/student.json",
                    "type": "post",
                    "data": json_student,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "text",
                    "success": function (response) {
                        console.log(response);
                        layer.alert(response)
                    },
                    "error": function (response) {
                        console.log(response);
                    }
                });

            });
            $("#btn3").click(function () {
                $.ajax({
                    "url": "test/error.html",
                    "type": "post",
                    "dataType": "text",
                    "success": function (response) { // 服务器端成功处理请求后调用的回调函数
                        layer.msg(response);
                    },
                    "error": function (response) { // 服务器端成功处理请求后调用的回调函数
                        layer.msg(response);
                    }
                })
            });
        });
    </script>
    </head>
    <body>

        <%@include file="common/nav.jsp" %>

        <div class="container-fluid">
            <div class="row">

                <%@include file="common/side-bar.jsp" %>

                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <button id="btn1" style="width:300px;margin:auto" class="btn btn-lg btn-success btn-block">
                        发送复杂对象Student
                    </button>
                    <br/>
                    <br/>
                    <button id="btn2" style="width:300px;margin:auto" class="btn btn-lg btn-success btn-block"
                            onclick="click_btn2(this)">测试异常解析器（非Ajax）
                    </button>
                    <br>
                    <br>
                    <button id="btn3" style="width:300px;margin:auto" class="btn btn-lg btn-success btn-block">
                        测试异常解析器（Ajax）
                    </button>
                </div>
            </div>
        </div>

    </body>
</html>
